// fetch.js
// import { ref, watchEffect, toValue } from 'vue'

// export function useFetch(url) {
//   const data = ref(null)
//   const error = ref(null)

//   const fetchData = () => {
//     // reset state before fetching..
//     data.value = null
//     error.value = null

//     fetch(toValue(url))
//       .then((res) => res.json())
//       .then((json) => (data.value = json))
//       .catch((err) => (error.value = err))
//   }

//   watchEffect(() => {
//     fetchData()
//   })

//   return { data, error }
// }

import { ref, watchEffect, toValue } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  
  watchEffect(async () => {
    // reset state before fetching..
    data.value = null
    error.value = null
    
    // resolve the url value synchronously so it's tracked as a
    // dependency by watchEffect()
    const urlValue = toValue(url)
    
    try {
      // artificial delay / random error
  	  await timeout()
  	  // unref() will return the ref value if it's a ref
	    // otherwise the value will be returned as-is
    	const res = await fetch(urlValue)
	    data.value = await res.json()
    } catch (e) {
      error.value = e
    }
  })

  return { data, error }
}

// artificial delay
function timeout() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.3) {
        resolve()
      } else {
        reject(new Error('Random Error'))
      }
    }, 300)
  })
}